<template>
  <div class="csj-xheader">
    <!--头部-->
    <div class="csj-xheader-head">
      <div class="zt-header-logo">
        <img :src="logoUrl" />
        <span class="ml15 fb csj-head-logo">嘉兴市秀洲区智慧云街道管理系统</span>
      </div>
      <div class="csj-head-avatar">
        <Dropdown>
          <div class="csj-drop-avatar">
            <img :src="!userMsg.avatar?defaultAvatar:imagePrefix(userMsg.avatar)" />
            <span class="mr5">{{truename}}</span>
            <Icon type="ios-arrow-down"></Icon>
            <Icon type="ios-arrow-thin-up"></Icon>
          </div>
          <Dropdown-menu slot="list">
            <Dropdown-item @click.native="xout">退出登录</Dropdown-item>
          </Dropdown-menu>
        </Dropdown>
      </div>
    </div>
    <div class="csj-body">
      <div class="csj-body-nav">
        <div class="csj-nav-scroll">
          <div class="wpx200"
               v-for="(item,index) in ModelData.xLeftTitle"
               :key="'xLeftTitle'+index">
            <template v-if="!item.url">
              <div class="csj-nav-item xcol-box"
                   @click="isShowMenu(index)"
                   :class="item.isActive?'cfff':'csj-nav-hover'">
                <i class="zt-iconfont"
                   :class="item.icon"></i>
                <span class="xflex">{{item.name}}</span>
                <Icon v-if="!item.isShow"
                      type="ios-arrow-down" />
                <Icon v-else
                      type="ios-arrow-up" />
              </div>
              <div v-if="item.isShow"
                   class="csj-nav-item csj-navitem-li"
                   v-for="(nav,i) in item.children"
                   :key="'nav'+index+i"
                   :class="nav.isActive?'csj-navli-active':'csj-nav-hover'"
                   @click="menuItemLocation(nav.url)">
                {{nav.name}}
              </div>
            </template>
            <template v-else>
              <div class="csj-nav-item"
                   :class="item.isActive?'csj-navli-active':'csj-nav-hover'"
                   @click="menuItemLocation(item.url)">
                <i class="zt-iconfont"
                   :class="item.icon"></i>
                <span>{{item.name}}</span>
              </div>
            </template>
          </div>
          <!-- 下拉滑动 -->
          <!-- <div class="hdtop wpx200">
            <ul v-for="(item,index) in ModelData.xLeftTitle"
                :key="'xLeftTitle'+index">
              <li>
                <div>111</div>
                <ul>
                  <li>2222</li>
                </ul>
              </li>
            </ul>
          </div> -->
        </div>
      </div>
      <div class="csj-body-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script lang="ts" src="./xheader.ts"></script>